<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">

      <div>
        <!-- 搜索 -->
        <el-input v-model="query.xm" clearable size="small" placeholder="姓名、身份证号" style="width: 170px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" prop="xm" label="姓名" />
        <el-table-column align="center" prop="xb" label="性别" />
        <el-table-column align="center" prop="nl" label="年龄" />
        <el-table-column align="center" prop="sfz" label="身份证" width="150" />
        <el-table-column align="center" prop="qyzt" label="签约状态">
          <template slot-scope="scope">
            {{ dict.label.qygl[scope.row.qyzt] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="qysj" label="签约日期" width="90" />

        <el-table-column align="center" prop="ssqx" label="所属统筹区">
          <template slot-scope="scope">
            {{ dict.label.ccstcqh[scope.row.ssqx] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="dyksrq" label="待遇开始日期" width="100" />
        <el-table-column align="center" prop="dyjsrq" label="待遇结束日期" width="100" />
        <el-table-column align="center" prop="cblx" label="参保类别" width="130" />
        <el-table-column align="center" prop="zhzt" label="照护状态">
          <template slot-scope="scope">
            {{ dict.label.zhzt[scope.row.zhzt] }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="jhrxm" label="监护人姓名" />
        <el-table-column align="center" prop="jhrdh" label="监护人电话" width="130" />
        <el-table-column align="center" prop="jhrgx" label="关系" width="130" />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button type="warning" size="small" @click="crud.toEdit(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 解约 -->
      <el-dialog title="解约附件信息" :visible.sync="dialogCancleFormVisible" width="500px">
        <el-form>
          <el-form-item label="解约日期：" prop="jydate">
            <el-date-picker
              v-model="form.jydate"
              disabled
              type="date"
              placeholder="选择日期"
            />
          </el-form-item>
          <br>
          <!-- 上传按钮 -->
          <el-upload
            ref="upload_shbzk"
            disabled
            :on-preview="handlePreview"
            :data="fjlb_zhjy"
            :headers="headers"
            :action="minnioUploadHomeImage"
            :file-list="fjlb_zhjy"
            list-type="picture"
          >
            <div slot="tip" class="el-upload__tip"><b>解约附件：</b>jpg/png文件，且不超过10MB</div>
          </el-upload>
        </el-form>
        <div slot="footer" class="dialog-footer" />
      </el-dialog>

      <!--分页组件-->
      <pagination />
      <image-viewer
        v-if="showImgViewer"
        :url-list="imgPreviewUrl"
        :on-close="() => {showImgViewer = false}"
        :z-index="3000"
      />
    </div>
  </div>
</template>

<script>
import crudQy from '@/api/business/qy'
import CRUD, { presenter, header, form } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import crudFile from '@/api/tools/localStorage'

const defaultForm = { bisQyId: null, bisQyHljgId: null, xm: null, xb: null, nl: null, sfz: null, qyzt: null, qysj: null, ssqx: null, dyjsrq: null, cblx: null, jhrxm: null, jydate: null, qypath: null }
export default {
  name: 'Yjy',
  components: { pagination, rrOperation, crudQy },
  mixins: [presenter(), header(), form(defaultForm)],
  dicts: ['xb', 'yjsgx', 'ccs', 'zhzt', 'ccstcqh', 'qygl'],
  cruds() {
    return CRUD({ title: '居家解约', url: 'api/qy/qyHomeYjy', idField: 'bisQyId', sort: 'bisQyId,desc', crudMethod: { ...crudQy }})
  },
  data() {
    return {
      dialogCancleFormVisible: false,
      /* 默认加载上传的文件列表 */
      fjlb_zhjy: [],
      fileIds: '',
      fileVideoIds: '',
      fileAllIds: '',
      showImgViewer: false,
      fileUploading: false,
      /* 上传附件时，附件类别（照护解约） */
      fjlb_zhjy: { 'fjlb': 'ZHJY' },
      /* 解约提交的参数 */
      qyid: '',
      jysj: '',
      zhid: '',
      headers: { 'Authorization': getToken() },
      permission: {
        add: ['admin', 'qy:add'],
        edit: ['admin', 'qy:edit'],
        del: ['admin', 'qy:del']
      }
    }
  },
  computed: {
    ...mapGetters([
      'baseApi',
      'fileUploadApi',
      'minioUploadImageApi',
      'minioMpUploadImageApi',
      'minnioUploadHomeImage',
      'uploadImage',
      'minioUploadVideoApi',
      'minioMpUploadVideoApi',
      'imagesUploadApi',
      'user'
    ])
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    doApproveQuery() {
      this.crud.toQuery()
    },
    getFiles() {
      crudFile.queryFileByFjlb2(this.form.qyid).then(res => {
        for (let i = 0; i < res.length; i++) {
          const file = res[i]
          if (file.fjlb === 'ZHJY') {
            const obj = { 'id': file.id, 'name': file.name, 'url': file.path2 }
            this.fjlb_zhjy.push(obj)
            this.fileVideoIds += file.id + ','
          }
        }
      })
    },
    /**
     * 点击修改之前
     * @param crud
     * @param form
     * @returns {boolean}
     */
    [CRUD.HOOK.beforeToEdit](crud, form) {
      this.dialogCancleFormVisible = true
      this.fjlb_zhjy = []
      this.fileVideoIds = ''
      this.form.jydate = this.form.dyjsrq
      console.log(form)
      this.getFiles()
      return true
    },
    /**
     * 图片预览
     * @param file
     */
    handlePreview(file) {
      console.log('图片预览 :{}', file)
      if (file.response) {
        window.open(file.response.data.url2)
      } else {
        window.open(file.url)
      }
    }
  }

}
</script>

<style scoped>

</style>
